<template>
  <table cellpadding="5">
    <thead>
    <tr>
      <th>姓名</th>
      <th>职务</th>
      <th>入党日期</th>
      <th>党龄</th>
      <th>学习积分</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in tableData" :key="index" :style="getRowStyle(index)">
      <td>{{ item.name }}</td>
      <td>{{ item.position }}</td>
      <td>{{ item.joinDate }}</td>
      <td>{{ item.partyAge }}</td>
      <td>{{ item.studyPoints }}</td>
    </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface TableRow {
  name: string;
  position: string;
  joinDate: string;
  partyAge: string;
  studyPoints: number;
}

// 表格数据
const tableData = ref<TableRow[]>([
  { name: '王庆', position: '常委', joinDate: '2014-09-01', partyAge: '9年', studyPoints: 300 },
  { name: '李梅', position: '书记', joinDate: '2017-09-01', partyAge: '6年', studyPoints: 290 },
  { name: '张容', position: '副书记', joinDate: '2016-09-01', partyAge: '7年', studyPoints: 280 },
  { name: '王理想', position: '党组织成员', joinDate: '2015-09-01', partyAge: '8年', studyPoints: 290 },
  { name: '吴超', position: '党组织成员', joinDate: '2016-09-01', partyAge: '7年', studyPoints: 260 }
]);

// 获取每行的样式，使用rgba颜色
const getRowStyle = (index: number) => {

  return index % 2 === 0
      ? { backgroundColor: 'rgb(191,74,35, 0)' }  // 半透明浅灰色
      : { backgroundColor: 'rgba(191,74,35, 0.3)' };    // 不透明的白色
};
</script>

<style scoped>
table {
  border-collapse: collapse; /* 合并表格单元格的边框 */
  width: 100%;
  border: none; /* 去掉表格的外边框 */
}

th, td {
  text-align: left;
}

th {
  background-color: rgba(191,74,35, 0.3);  /* 表头的底色为透明灰 */
}
</style>
